<template>
  <div class="box">
    <el-table :data="dataList"  height="calc(100vh - 325px)"  @selection-change="selectChange"  >
      <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
      <el-table-column label="追溯码" width="600">
        <template #default="scope">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model.trim="scope.row.traceBackNo"
              maxlength="65"
              show-word-limit
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="箱号" width="160" prop="boxNo"></el-table-column>
      <el-table-column label="物料" width="120" prop="materialNo"></el-table-column>
      <el-table-column width="160" label="操作">
        <template #default="scope">
          <el-button type="success"  size="small" @click="selectRow(scope.$index, scope.row)">查看</el-button>
          <el-button type="danger"  size="small" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>
  <div class="button">
    <el-button type="primary" @click="addTrace()">添加</el-button>
  </div>
</template>

<script>

export default {
  name: "selectTraceCode",
  data() {
    return {
      loading:false,
      dataList:[{traceBackNo:"",boxNo:"",materialNo:"",}]
    }
  },
  methods:{
    addTrace(){
      this.dataList.push({traceBackNo:"",boxNo:"",materialNo:"",})
    },
    async deleteRow(idx) {
      try {
        await this.$confirm('确定删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch(e) {
        return
      }
      this.dataList.splice(idx,1)
    },
    async selectRow(index,row){
      this.loading = true
      let param = {traceBackNo : this.dataList[index].traceBackNo}
      try {
        let res = await this.callApi('get_detail_by_trace',param)
        if (!res.res) return
        this.dataList[index].boxNo = res.data.boxNo
        this.dataList[index].materialNo = res.data.materialNo
      }finally {
        this.loading = false
      }
    }
  }

}
</script>

<style scoped>

</style>